<template>
	<view>
		<view class="m_header_top">
			<my-top :title="title" :isline='true'></my-top>
		</view>
		<view class="memberdetails ">
			<view class="top">
				<view class="headerimg">
					<image :src="childinfo.logo?childinfo.logo:'../../../../static/img/asd.png'" mode=""></image>
				</view>
				<view class="title">
					<view class="name">{{childinfo.name}}</view>
					<view class="distraction">
						<text class="gender">{{childinfo.gender==1?'女':childinfo.gender==2?'男':'保密'}}</text>
						<text>{{childinfo.birthday | fromdata}}</text>
					</view>
				</view>
			</view>

			<!-- <view class="qrimg">
			    <tki-qrcode
				class="bd"
			    ref="qrcode"
			    :cid="qrimg.cid"
			    :val="qrimg.val"
			    :size="qrimg.size"
			    :unit="qrimg.unit"
			    :background="qrimg.background"
			    :foreground="qrimg.foreground"
			    :pdground="qrimg.pdground"
			    :icon="qrimg.icon"
			    :iconSize="qrimg.iconsize"
			    :lv="qrimg.lv" 
			    :onval="qrimg.onval"
			    :loadMake="qrimg.loadMake"
			    :usingComponents="qrimg.usingComponents"
			    :showLoading="qrimg.showLoading"
			    :loadingText="qrimg.loadingText"
			    @result="qrR" />
			</view> -->
			<view class="qucode">
				<image :src="codeImg" style="width: 254px;height: 254px;" mode=""></image>
			</view>
			<canvas class="canvas-hide" canvas-id="qrcode" style="width: 254px;height: 254px;" />
			<view class="btn_dis">
				<text class="distraction">扫描二维码,关注日程吧</text>
				<view class="function">
					<text @click="saveimg">保存到相册</text>
					<text>分享二维码</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';

	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import uQRCode from "@/js_sdk/Sansnn-uQRCode/uqrcode.js"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				title: '分享',
				imgsrc: '',
				codeImg: '',
				childinfo: {

				},
				qrimg: {
					cid: 'tki-qrcode-canvas',
					val: 'a',
					size: 200,
					unit: 'upx',
					show: true,
					background: '#000000',
					foreground: '#ffffff',
					pdground: '#ffffff',
					// icon:'../../../../static/img/asd.png',
					iconSize: 40,
					lv: 3,
					onval: true,
					loadMake: true,
					usingComponents: true,
					loadingText: '二维码生成中',
					showLoading: true,
				}
			};
		},
		filters: {
			fromdata(val) {
				console.log('1111', val);
				let old = '';
				if (val) {
					var a = val.split('-')[0];
					var b = new Date().getFullYear() - a;
					old = b + '岁';
				} else {
					old = '0岁'
				}
				return old
			}
		},
		onLoad(e) {
			if (e.data) {
				// this.qrimg.val =  e.data;
				this.make(e.data)
				console.log(e.data);
				let obj = JSON.parse(e.data);
				this.initdata(obj)
			}
		},
		methods: {
			...mapActions({
				getIdSchedule: 'initData/getIdSchedule'
			}),
			async make(text) {
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text ? text : '参数有误',
					size: 254,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						// console.log(res)
						this.codeImg = res
					}
				})

				// Promise
				// uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	componentInstance: this,
				// 	text: 'uQRCode',
				// 	size: 354,
				// 	margin: 10,
				// 	backgroundColor: '#ffffff',
				// 	foregroundColor: '#000000',
				// 	fileType: 'jpg',
				// 	errorCorrectLevel: uQRCode.errorCorrectLevel.H
				// }).then(res => {
				// 	console.log(res)

				// })

				// // 同步等待
				// var res = await uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	componentInstance: this,
				// 	text: 'uQRCode',
				// 	size: 354,
				// 	margin: 10,
				// 	backgroundColor: '#ffffff',
				// 	foregroundColor: '#000000',
				// 	fileType: 'jpg',
				// 	errorCorrectLevel: uQRCode.errorCorrectLevel.H
				// })

				// console.log(res)
			},
			async initdata(obj) {
				let result = await this.getIdSchedule(obj.id);
				console.log(result);
				this.childinfo = result;

			},
			saveHeadImgFile() {
			    let base64 = this.codeImg;
			    const bitmap = new plus.nativeObj.Bitmap("test");
			    bitmap.loadBase64Data(base64, function() {
			        const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
			        console.log('saveHeadImgFile', url)
			        bitmap.save(url, {
			            overwrite: true,  // 是否覆盖
			            // quality: 'quality'  // 图片清晰度
			        }, (i) => {
			            uni.saveImageToPhotosAlbum({
			                filePath: url,
			                success: function(res) {
								console.log(res);
			                    uni.showToast({
			                        title: '图片保存成功',
			                        icon: 'none'
			                    })
			                    bitmap.clear()
			                }
			            });
			        }, (e) => {
			            uni.showToast({
			                title: '图片保存失败',
			                icon: 'none'
			            })
			            bitmap.clear()
			        });
			    }, (e) => {
			        uni.showToast({
			            title: '图片保存失败',
			            icon: 'none'
			        })
			        bitmap.clear()
			    });
			},
			saveimg() {
				var _that = this;

				// #ifdef APP-PLUS
				// uni.saveImageToPhotosAlbum({
				// 	filePath: _that.codeImg,
				// 	success: function (res) {
				// 		console.log(res,'图片');
				// 		uni.showToast({
				// 			title: '二维码保存成功',
				// 			icon: 'success',
				// 			duration: 2000
				// 		});
				// 	},
				// 	fail(res) {
				// 		console.log(res,'图片shibai');
				// 	}
				// });
				console.log('保存图片App');
				this.saveHeadImgFile()
				// uni.previewImage({
				// 	urls: _that.codeImg,
				// 	longPressActions: {
				// 		itemList: ['发送给朋友', '保存图片', '收藏'],
				// 		success: function(data) {
				// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 		},
				// 		fail: function(err) {
				// 			console.log(err.errMsg);
				// 		}
				// 	}
				// })
				// #endif
				// #ifdef H5
				//保存图片到本地
				(function(t) {
					var dlLink = t || document.createElement("a");
					if (!t) {
						dlLink.id = 'dlLink';
						dlLink.download = '小豆子';
						document.body.appendChild(dlLink);
					}
					dlLink.href = _that.codeImg;
					dlLink.click();
				})(document.querySelector("#dlLink"));
				// #endif
			},
			qrR(val) {
				// console.log('图片地址',val);
				if (val) {
					this.imgsrc = val
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bd {
		// border: 1px solid red;
		padding: 2rpx;
		border: 1px solid #ffffff;
		background-color: #FFFFFF;
	}

	.qucode {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}

	.memberdetails {
		display: flex;
		flex-flow: column wrap;
		padding: 24rpx 16rpx;
		width: 750rpx;
		// background: #000000;
		opacity: 1;
		height: 100%;

		.qrimg {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;
			padding: 10rpx;
			// border: 1px solid #000000;

		}

		.btn_dis {
			text-align: center;
			margin-top: 50rpx;

			.distraction {

				// width: 287rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #707070;
				opacity: 1;

			}

			.function {
				display: flex;
				justify-content: center;

				text {
					margin: 50rpx;
					// width: 140rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 42rpx;
					color: #5861F6;
					opacity: 1;

				}
			}
		}

		.request {
			// width: 583rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 42rpx;
			color: #707070;
			opacity: 1;
			margin-bottom: 50rpx;
		}

		.top {
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			text-align: center;
		}

		.headerimg {
			border-radius: 50%;
			width: 144rpx;
			height: 144rpx;
			background: #6BDFA4;
			opacity: 1;
			margin-bottom: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.title {
			display: flex;
			flex-direction: column;

			.name {
				// width: 96rpx;
				height: 45rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #121212;


			}

			.distraction {
				// width: 295rpx;
				height: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #707070;
				opacity: 1;

				.gender {
					margin-right: 24rpx;
				}
			}
		}
	}
</style>
